<template>
  <div>
    <p class="con-title">
      <span>
        <img src="@/assets/img/control/content/Group769.png" />
      </span>
      <span>账户充值</span>
    </p>
  </div>
  <!-- 充值信息 -->
  <p class="noticeMsg">如您需要对公支付,请通知我们的工作人员</p>
  <p class="noticeTitle">第三代小云产品请到这里充值</p>
  <div class="payNum-box">
    <div class="payUser-box">
      <p class="payUser">支付用户</p>
      <p>{{ userInfo.nickName }}</p>
    </div>
    <div class="payUser-box">
      <p class="payUser">支付金额</p>
      <div><el-input v-model="amount" /></div>
      <p>至少充值1元人民币</p>
    </div>
  </div>
  <div class="payment-method-box">
    <b style="margin-right: 200px;">充值方式</b>
    <el-radio-group v-model="paymentMethod" class="ml-4">
      <el-radio label="ALIPAY" size="large">支付宝</el-radio>
      <el-radio label="WECHAT" size="large">微信</el-radio>
      <el-radio label="BANK_TRANSFER" size="large">对公账户</el-radio>
    </el-radio-group>
  </div>

  <!-- 对公账户支付弹窗 -->
  <el-dialog v-model="accountShow" title="对公账户充值" width="40%" center>
    <div class="dialogContent">
      <p style="margin-bottom: 20px;">开通后，您可以转账汇款至平台为您提供的专属汇款账号，平台在收到银行汇款后将自动匹配到您的专属汇款账号并为您完成充值.</p>
      <b>汇款账号如下:</b>
      <div class="notice">
        <el-icon color="orange" size="20"><WarningFilled /></el-icon>
        <p class="notice-msg">温馨提示:一般情况下当天到账，具体时间将受银行处理时间影响。建议您于北京时间17:00前进行转账，否则可能会出现延迟到账的情况。</p>
      </div>
      <div class="bank-msg-box">
        <div class="bank-msg-one">
          <div class="bank-msg-title">开户银行：</div><div>{{ settingValue.bankOfDeposit || '无' }}</div>
        </div>
        <div class="bank-msg-one">
          <div class="bank-msg-title">开户名称：</div><div>{{ settingValue.accountName || '无' }}</div>
        </div>
        <div class="bank-msg-one">
          <div class="bank-msg-title">对公账户账号：</div><div>{{ settingValue.accountNumber || "无" }}</div>
        </div>
        <div class="bank-msg-one">
          <p class="bank-msg-title">支付金额：</p>
          <div><el-input v-model="amount" /></div>
          <p>至少充值1元人民币</p>
        </div>
      </div>
      
      <template style="display: flex;align-items: center;flex-direction: column;">
        <el-upload
          v-model:file-list="fileList"
          action=""
          :limit="1"
          list-type="picture-card"
          accept=".jpg,.jpeg,.png"
          :on-preview="handlePreview"
          :before-upload="handleUpload"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
        <el-button style="width: 200px;margin-top: 20px;" @click="handlePay"> 充值完成 </el-button>
      </template>
    </div>
  </el-dialog>
  <Img-preview v-model:show="imgShow" :imgs="[imgUrl]" />
  
  <!-- 支付完成 -->
  <div class="payBtn-box">
    <el-button type="primary" @click="toPay">开始充值</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage , type UploadUserFile} from 'element-plus';
import { balanceOrder, accountLog } from '@/api/control/myRecharge';
import { getUserInfo } from "@/api/loginApi";
import { setting, upload } from "@/api/cloud/index";

const router = useRouter();
//支付方式类型
const payType = ref('ALIPAY');
//支付金额
const amount = ref(1);
const userInfo = ref<any>({}); // 用户信息
//支付方式
const paymentMethod = ref('ALIPAY');
//对公账户充值弹框
const accountShow = ref(false);
// 对公账户账号
const settingValue = ref<any>({}); 
const baseURL = import.meta.env.VITE_BASE_URL;
const fileList = ref<UploadUserFile[]>([]); // 上传图片列表
const imgShow = ref(false); // 图片预览
const imgUrl = ref(""); // 图片地址


onMounted(() => {
  getUser();
  getPublicMsg();
});

// 获取用户信息
const getUser = () => {
  getUserInfo().then((res: any) => {
    userInfo.value = res.data;
  });
};

//获取对公账户信息
const getPublicMsg = () => {
  setting({ key: "ADMIN_ACCOUNT_NUMBER_SETTING" }).then((res:any) => {
    settingValue.value = JSON.parse(res.data.settingValue);
  });
}

// 支付完成
const handlePay = () => {
  if (fileList.value.length == 0) {
    ElMessage.error("请上传图片");
    return;
  }
  const fileName = fileList.value.map(item => item.name).join(',');
  let data = {
    amount: amount.value,
    paymentVoucher: fileName,
  }
  accountLog(data).then((res: any) => {
    if (200 == res.code) {
      router.push(`/control/recharge/startPay?paymentMethod=${paymentMethod.value}`);
    }
  })
};

// 预览图片
const handlePreview = (uploadFile) => {
  imgUrl.value = baseURL + uploadFile.url;
  imgShow.value = true;
};

// 上传图片
const handleUpload = (file) => {
  const formData = new FormData();
  formData.append("file", file);
  upload(formData).then((res: any) => {
    fileList.value.push({ name: res.fileName, url: baseURL + res.fileName });
  });  
  return false;
};
/**去支付 */
const toPay = () => {
  if (paymentMethod.value === 'BANK_TRANSFER') {
    accountShow.value = true;
  } else {
    if (amount.value >= 1) {
      balanceOrder({ amount: amount.value, paymentMethod: paymentMethod.value }).then((res: any) => {
        if (200 == res.code) {
          router.push(`/control/recharge/startPay?sn=${res.data.sn}&paymentMethod=${paymentMethod.value}&amount=${res.data.amount}`);
        }
      })
    } else {
      ElMessage.info('至少充值1元人民币');
    }
  }
  

}
</script>

<style scoped lang="less">
.dialogContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  .notice {
    display: flex;
    padding: 10px 20px;
    margin-top: 10px;
    background-color: rgb(236, 237, 237);
    
    .notice-msg {
      margin-left: 10px;
    }
  }

  .bank-msg-box {


    .bank-msg-one {
      display: flex;
      margin: 10px 0;
      .bank-msg-title {
        width: 30%;
      }
    }
    
  }

  .bank-amount {
    display: flex;
  }

  
}
.con-title {
  width: 100%;
  height: 25px;
  display: flex;
  align-items: center;
  margin-bottom: 30px;

  span:nth-child(1) {
    display: flex;
    align-items: center;

    img {
      width: 14px;
      height: 14px;
    }
  }

  span:nth-child(2) {
    display: flex;
    align-items: center;
    margin-left: 10px;
    font-size: 16px;
  }
}

.noticeMsg {
  background-color: #fff7e1;
  border: 1px solid #f7dfbf;
  height: 50px;
  line-height: 50px;
  text-indent: 16px;
}

.noticeTitle {
  color: #0b8bed;
  font-weight: 700;
  margin-top: 20px;
}

.payment-method-box {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.payNum-box {
  margin: 20px 0;

  .payUser-box {
    height: 50px;
    display: flex;
    align-items: center;
    border-top: 1px solid #ccc;

    .payUser {
      margin-right: 200px;
      font-weight: 700;
    }
  }
}

.Alipay {
  width: 250px;
  height: 300px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.unionPay {
  display: flex;
  flex-wrap: wrap;

  .unionPayImg {
    width: 200px;
    height: 50px;
    margin-right: 20px;
    margin-top: 20px;
  }
}

.payBtn-box {
  margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
